<template>
  <div class="layout-container flex">
    <!-- 业务组件选择 -->
    <div class="left flex wrap space-between">
      <slot />
    </div>
    <!-- 显示对应业务组件 -->
    <div class="center">
      <RouterView v-slot="{ Component }">
        <component :is="Component" :status="currentCom.status" :serialNum="1" />
      </RouterView>
    </div>
    <!-- 编辑面板 -->
    <div class="right"><EditPanel :com="currentCom" /></div>
  </div>
</template>

<script setup lang="ts">
import { computed, provide } from 'vue';
import { ElMessage } from 'element-plus';
import { useMaterialStore } from '@/stores/useMaterial';
import EditPanel from '@/components/Editor/EditPanel/index.vue';
import { changeEditorIsShowStatus } from '@/utils';

import type { PicLink, MaterialStore } from '@/types';
import { IsOptionsStatus, isPicLink, IsTextInputStatus, IsTypeStatus } from '@/types';

const store = useMaterialStore() as unknown as MaterialStore;
const currentCom = computed(() => store.coms[store.currentMaterialCom]);

const updateStatus = (configKey: string, payload?: number | string | boolean | object) => {
  switch (configKey) {
    case 'type': {
      if (typeof payload === 'number' && IsTypeStatus(currentCom.value.status)) {
        changeEditorIsShowStatus(currentCom.value.status, payload);
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "type". Expected number.');
      }
      break;
    }
    case 'title':
    case 'desc': {
      if (typeof payload === 'string') {
        store.setTextStatus(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "title" or "desc". Expected string.');
      }
      break;
    }
    case 'options': {
      if (!IsOptionsStatus(currentCom.value.status)) return;
      if (typeof payload === 'number') {
        // 删除选项
        const result = store.removeOption(currentCom.value.status[configKey], payload);
        if (result) ElMessage.success('删除成功');
        else ElMessage.error('至少保留两个选项');
      } else if (typeof payload === 'boolean') {
        // 开关评分提示语
        store.setIsUse(currentCom.value.status[configKey], payload);
      } else if (typeof payload === 'object' && isPicLink(payload)) {
        // 设置图片链接
        store.setPicLinkByIndex(currentCom.value.status[configKey], payload);
      } else if (typeof payload === 'object') {
        // 设置评分组件的提示文字
        store.setRateScoreText(
          currentCom.value.status[configKey],
          payload as { val: string; index: number },
        );
      } else {
        // 新建选项
        store.addOption(currentCom.value.status[configKey]);
      }
      break;
    }
    case 'position': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "position". Expected number.');
      }
      break;
    }
    case 'titleSize':
    case 'descSize': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleSize" or "descSize". Expected number.');
      }
      break;
    }
    case 'titleWeight':
    case 'descWeight': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleWeight" or "descWeight". Expected number.');
      }
      break;
    }
    case 'titleItalic':
    case 'descItalic': {
      if (typeof payload === 'number') {
        store.setOption(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleItalic" or "descItalic". Expected number.');
      }
      break;
    }
    case 'titleColor':
    case 'descColor': {
      if (typeof payload === 'string') {
        store.setTextStatus(currentCom.value.status[configKey], payload);
      } else {
        console.error('Invalid payload type for "titleColor" or "descColor". Expected string.');
      }
      break;
    }
    case 'maxLength': {
      if (typeof payload === 'string' && IsTextInputStatus(currentCom.value.status)) {
        store.setTextStatus(currentCom.value.status[configKey], payload);
      }
      break;
    }
  }
};

const getPicLink = (picLink: PicLink) => {
  updateStatus('options', picLink);
};
provide('updateStatus', updateStatus);
provide('getPicLink', getPicLink);
</script>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  // Header组件高度60px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 110px - 40px - 20px);
  align-items: flex-start;
  border: 1px solid var(--el-menu-border-color);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}
.left {
  width: 200px;
  text-align: center;
  align-items: flex-start;
  padding: 20px;
}
.center {
  width: 580px;
  // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 110px - 40px - 60px - 20px);
  overflow-y: scroll;
  padding: 30px;
  border-left: 1px solid var(--el-menu-border-color);
}
.right {
  width: 400px;
  height: calc(100vh - 110px - 40px - 20px);
  overflow-y: scroll;
  border-left: 1px solid var(--el-menu-border-color);
}
</style>
